<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="http://code.z01.com/favicon.ico">
<title>发布闲置</title>
<!-- Bootstrap 核心CSS -->


	<!-- Style Css -->
	<link rel="stylesheet" href="/css/style.css">
	<!-- Custom Styles -->
	<link rel="stylesheet" href="/css/custom.css">

    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/plugins.css">
    <script src="/js/jquery-3.4.1.slim.min.js"></script>
    <script src="/js/popper.min.js"></script>
    <script src="/js/bootstrap.min.js" type="application/javascript"></script>

</head>
<body>


<div id="head" th:include="common/template :: common_head"></div>


<div class="container">

  <div class="row ">

	<div class="col-md-8 order-md-1">
	  <form class="needs-validation" novalidate="" method="post" th:action="@{saveProduct}" th:object="${product}"
			enctype="multipart/form-data">
		<div class="row">
		  <div class="col-md-6 mb-3">
			<label for="title">物品标题</label>
			<input type="text" class="form-control" id="title" th:field="*{title}" placeholder=""
				   value="" required="">
			<div class="invalid-feedback">
			  标题不能为空.
			</div>
		  </div>
		  <div class="col-md-6 mb-3">
			<label for="price">物品价格</label>
			<input type="number" class="form-control" id="price" th:field="*{price}"
				   placeholder="" value="" required="">
			<div class="invalid-feedback">
				价格不能为空
			</div>
		  </div>
		</div>

		  <div class="form-group mb-3">
			  <label>物品类型</label>
			  <select class="form-control" id="type" th:field="*{type}">
				  <option value="书籍类">书籍类</option>
				  <option value="生活类">生活类</option>
				  <option value="电器类">电器类</option>
				  <option value="衣物类">衣物类</option>
				  <option value="化妆类">化妆类</option>
			  </select>
		  </div>


		<div class="mb-3">
		  <label for="content">简介</label>
		  <textarea type="test" class="form-control" id="content" th:field="*{content}"
					placeholder="几成新,什么时候买的之类的" required=""></textarea>
		</div>
		
		<div class="mb-3">
		  <label for="email">邮箱 <span class="text-muted">(选填)</span></label>
		  <input type="email" class="form-control" id="email" th:field="*{email}">
		</div>

		<div class="mb-3">
		  <label for="phone">phone <span class="text-muted">(选填)</span></label>
		  <input type="number" class="form-control" id="phone" th:field="*{phone}">
		</div>

		<div class="mb-3">
		  <label for="wechat">wechat</label>
		  <input type="text" class="form-control" id="wechat" th:field="*{wechat}">
		</div>
		
        <div class="input-group mb-3">
            <div class="custom-file">
                <input type="file" class="custom-file-input" id="validatedCustomFile1" name="files"
                       multiple="multiple" required="">
                <label class="custom-file-label" for="validatedCustomFile1" id="valFile1">选择图片
                </label>
            </div>
        </div>
        <div class="input-group mb-3">
            <div class="custom-file">
                <input type="file" class="custom-file-input" id="validatedCustomFile2" name="files"
                       multiple="multiple">
                <label class="custom-file-label" for="validatedCustomFile2" id="valFile2">
                    选择图片</label>
            </div>
        </div>
        <div class="input-group mb-3">
            <div class="custom-file">
                <input type="file" class="custom-file-input" id="validatedCustomFile3" name="files"
                       multiple="multiple">
                <label class="custom-file-label" for="validatedCustomFile3" id="valFile3">
                    选择图片</label>
            </div>
        </div>
		
		
		<hr class="mb-4">
		<button class="btn btn-primary btn-lg btn-block" type="submit">发   布</button>
	  </form>
	</div>
  </div>
  <footer class="my-5 pt-5 text-muted text-center text-small">
	<p class="mb-1">© 2019-2077 邱少</p>
  </footer>
</div>

<script>
      (function() {
        'use strict';
        window.addEventListener('load', function() {
          var forms = document.getElementsByClassName('needs-validation');
          var validation = Array.prototype.filter.call(forms, function(form) {
            form.addEventListener('submit', function(event) {
              if (form.checkValidity() === false) {
                event.preventDefault();
                event.stopPropagation();
              }
              form.classList.add('was-validated');
            }, false);
          });
        }, false);
      })();

	  $('#validatedCustomFile1').change(function (e) {
		  var fileName = e.currentTarget.files[0].name;
		  console.log(fileName);//js-dom.png
		  $("#valFile1").text(fileName)
	  })
	  $('#validatedCustomFile2').change(function (e) {
		  var fileName = e.currentTarget.files[0].name;
		  console.log(fileName);//js-dom.png
		  $("#valFile2").text(fileName)
	  })
	  $('#validatedCustomFile3').change(function (e) {
		  var fileName = e.currentTarget.files[0].name;
		  console.log(fileName);//js-dom.png
		  $("#valFile3").text(fileName)
	  })

    </script>

<!----></body></html>